
<template>
    <div>
        <p>插槽的概念</p>
        <div  :style="style">
            <!-- <slot name="niubi"></slot>
            <br/>
            <slot name="buniubi"></slot> -->
            <slot value="4456"></slot>
        </div>
        <!-- <grand-son></grand-son> -->
    </div>
</template>

<script>
import grandSon from '@/components/grandson'
export default {
    name:"wtf",
    props:['prop1'],
    components:{
        grandSon
    },
    data(){
        return{
            style:{
                width:'200px',
                height:'200px',
                border:'1px solid #aaa',
                marginLeft:'10px'
            }
        }
    },
    mounted(){
        console.log(this.$parent.$options.name);
        
    },
    render(createElement){
        return createElement(
            'div',
            {
                style:this.style,
                // 触发事件
                // 这个比较好使
                nativeOn:{
                    click:this.handleClick
                },
                // 这个还得$emit一下
                on:{
                    click:this.handleClick
                },
                // slot的名字
                slot:'header',
                // 原生节点
                domProps:{
                    innerHtml:`<span>牛逼牛逼</span>`
                },
                // 类名
                attrs:{
                    class:'idjfhsdhj',
                    id:'ADASDSAD'
                }
            },
            //这句话引入了插槽,并且将插槽设置成默认样式
            // this.$slots.default
            // 也可以变成一个数组这样就可以有数据和插槽
            [
                this.$slots.default,
                this.prop1
            ]
        )
    }

}
</script>

<style lang="css">
    
</style>

